import React, { Component } from 'react'
import api from '@MODULES/common/api'
import { NavLink, withRouter } from 'react-router-dom'
import { ListView, PullToRefresh } from 'antd-mobile';
import './css/ListViewer.less'

let ds

class ListViewer extends Component {

    constructor(props) {
        super(props)
        ds = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        })
        this.state = {
            isLoading: false,
            listData: [],
            hasMore: null,
            page: 1,
            fetchParams: this.props.fetchParams || {},
            height: this.props.height || 500,
            firstIn: true,
            lastDataNum: 0
        }
    }

    componentDidMount() {
        if (this.props.refs) {
            this.props.refs(this)
        }
        this.requestListData()
    }

    onEndReached = () => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }

        this.setState({ page: this.state.page + 1, isLoading: true }, () => {
            this.requestListData()
        })

    }




    render() {
        const { listData } = this.state
        return (
            <div id="ListViewer">
                <div>
                    <ListView
                        dataSource={ds.cloneWithRows(listData)}
                        renderFooter={!this.props.home ? () => (<div
                            style={{ padding: 6, textAlign: 'center', fontSize: 10, color: process.theme['color-text-word'], }}>
                            {this.state.isLoading ? '加载中...' : ''}
                        </div>) : null}
                        renderHeader={this.props.header ? () => (this.props.header) : ''}
                        renderRow={this.renderRow}
                        renderFooter={this.state.listData.length === 0 && !this.state.firstIn ? this.noRenderRow : ''}
                        style={{
                            height: this.state.height,
                            overflow: 'auto',
                        }}
                        pageSize={4}
                        scrollRenderAheadDistance={500}
                        onEndReached={!this.props.home ? this.onEndReached : null}
                        onEndReachedThreshold={10}

                        pullToRefresh={<PullToRefresh
                            damping={60}
                            style={{
                                height: this.state.height,
                                overflow: 'auto',
                            }}
                            indicator={{ deactivate: '上拉可以刷新' }}
                            direction='down'
                            refreshing={this.state.checkRefreshing}
                            onRefresh={() => {
                                this.setState({ checkRefreshing: true });
                                this.refreshListData()
                            }}
                        >
                        </PullToRefresh>}
                    />
                </div>
            </div>

        )
    }

    /**
     * 获取列表数据
     * @param refresh
     */
    requestListData = (refresh) => {


        if (this.state.page > 1 && this.state.lastDataNum === 0) {
            return
        }


        this.props.fetchDataSource(this.state.page, (dataSource, height) => {
            console.log(height)
            if (height) {
                this.refreshHeight(height)
            }
            this.setState({
                listData: refresh ? dataSource : this.state.listData.concat(dataSource),
                lastDataNum: dataSource.length,
                isLoading: false,
                checkRefreshing: false,
                firstIn: false
            })

        })

    }

    /**
     * 刷新列表
     */
    refreshListData = () => {
        this.setState({
            page: 1,
            listData: [],
            firstIn: true,
            isLoading: true
        }, () => {
            this.refreshHeight()
            this.requestListData(true)
        })
    }

    // 重置高度
    refreshHeight = (height) => {
        this.setState({
            height: height || this.props.height || 500
        })
    }


    renderRow = this.props.renderRowContent

    noRenderRow = () => {
        return (<div className="noDataList">
            {/* <img src={require('./img/project/pic_zanwushuju.png')} alt="" /> */}
            <p>暂无数据</p>
        </div>)
    }


    // renderRow(rowData, sectionID, rowID) {
    //     return this.props.renderRowContent(rowData, sectionID, rowID)
    // }

    /**
     * 更新列表row的数据
     * @param rowId
     * @param rowData
     */
    updateRowData = (rowId, rowData) => {

        let listData = this.state.listData
        listData[rowId] = rowData
        this.setState({
            listData: listData
        })

    }
}


export default withRouter(ListViewer)
